<template>
  <j-modal :title="title" :width="700" :visible="visible" switchFullscreen @cancel="handleCancel" @ok="handleOk">
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
        <a-row>
          <a-col :span="11">
            <a-form-model-item label="方案名称">
              <a-input v-model="form.schemeName" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="11">
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button type="primary" icon="search" @click="onQuery"> 查询 </a-button>
              <a-button style="margin-left: 10px" icon="reload" @click="onResetForm"> 重置 </a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
    <a-card>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table
          ref="table"
          rowKey="id"
          :showAlert="false"
          :showSelection="true"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @selectedRow="onSelectedRow"
          @change="onTableChange"
        >
        </z-table>
      </div>
    </a-card>
  </j-modal>
</template>

<script>
import Api from '@/api/sjsk/performanceService'

export default {
  name: 'selPlan',
  components: {},
  data() {
    return {
      visible: false,
      title: '选择方案',
      form: {},
      labelCol: { span: 7 },
      wrapperCol: { span: 16 },
      rangePickerTime: [],
      loading: false,
      visible: false,
      isDisabled: true,
      reloading: false,
      checkList: [],
      form: {},
      treeDatas: [],
      toggle: true,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) => index + 1,
        },
        {
          title: '方案名称',
          dataIndex: 'schemeName',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={20} />
          },
        },
        {
          title: '适用范围',
          dataIndex: 'scope',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={this.$filterDictTextByCache('appScope', text)} />
          },
        },
      ],
      pageData: {},
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
    }
  },
  created() {},
  mounted() {},

  methods: {
    show() {
      this.visible = true
      this.onQuery()
    },

    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },

    onResetForm() {
      this.form = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },

    handleOk() {
      if (!this.checkList.length) {
        this.$message.warn('请选择方案')
        return
      } else if (this.checkList.length > 1) {
        this.$message.warn('请选择一个方案')
        return
      }
      this.$emit('ok', this.checkList)
      this.visible = false
    },

    onSelectedRow(list) {
      this.checkList = list
      this.isDisabled = list.length > 0 ? false : true
    },

    refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      form.status = '1'
      this.loading = true
      Api.getListScheme(form)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.$refs.table.onClearRowKeys()
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },

    getSelectedKeys(keys) {
      console.log(keys)
      this.$set(this.form, 'labelId', keys.join(','))
      this.onQuery()
    },

    handleCancel() {
      this.visible = false
    },
  },
}
</script>

<style lang="less" scoped>
::v-deep .ant-card-body {
  padding: 0;
}
</style>
